Conditions | 1 |
Paths | 1 |
Total Lines | 189 |
Code Lines | 125 |
Lines | 0 |
Ratio | 0 % |
Changes | 1 | ||
Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
1 | demo = { |
||
97 | initChartsPages: function() { |
||
98 | chartColor = "#FFFFFF"; |
||
99 | |||
100 | ctx = document.getElementById('chartHours').getContext("2d"); |
||
101 | |||
102 | myChart = new Chart(ctx, { |
||
103 | type: 'line', |
||
104 | |||
105 | data: { |
||
106 | labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"], |
||
107 | datasets: [{ |
||
108 | borderColor: "#6bd098", |
||
109 | backgroundColor: "#6bd098", |
||
110 | pointRadius: 0, |
||
111 | pointHoverRadius: 0, |
||
112 | borderWidth: 3, |
||
113 | data: [300, 310, 316, 322, 330, 326, 333, 345, 338, 354] |
||
114 | }, |
||
115 | { |
||
116 | borderColor: "#f17e5d", |
||
117 | backgroundColor: "#f17e5d", |
||
118 | pointRadius: 0, |
||
119 | pointHoverRadius: 0, |
||
120 | borderWidth: 3, |
||
121 | data: [320, 340, 365, 360, 370, 385, 390, 384, 408, 420] |
||
122 | }, |
||
123 | { |
||
124 | borderColor: "#fcc468", |
||
125 | backgroundColor: "#fcc468", |
||
126 | pointRadius: 0, |
||
127 | pointHoverRadius: 0, |
||
128 | borderWidth: 3, |
||
129 | data: [370, 394, 415, 409, 425, 445, 460, 450, 478, 484] |
||
130 | } |
||
131 | ] |
||
132 | }, |
||
133 | options: { |
||
134 | legend: { |
||
135 | display: false |
||
136 | }, |
||
137 | |||
138 | tooltips: { |
||
139 | enabled: false |
||
140 | }, |
||
141 | |||
142 | scales: { |
||
143 | yAxes: [{ |
||
144 | |||
145 | ticks: { |
||
146 | fontColor: "#9f9f9f", |
||
147 | beginAtZero: false, |
||
148 | maxTicksLimit: 5, |
||
149 | //padding: 20 |
||
150 | }, |
||
151 | gridLines: { |
||
152 | drawBorder: false, |
||
153 | zeroLineColor: "#ccc", |
||
154 | color: 'rgba(255,255,255,0.05)' |
||
155 | } |
||
156 | |||
157 | }], |
||
158 | |||
159 | xAxes: [{ |
||
160 | barPercentage: 1.6, |
||
161 | gridLines: { |
||
162 | drawBorder: false, |
||
163 | color: 'rgba(255,255,255,0.1)', |
||
164 | zeroLineColor: "transparent", |
||
165 | display: false, |
||
166 | }, |
||
167 | ticks: { |
||
168 | padding: 20, |
||
169 | fontColor: "#9f9f9f" |
||
170 | } |
||
171 | }] |
||
172 | }, |
||
173 | } |
||
174 | }); |
||
175 | |||
176 | |||
177 | ctx = document.getElementById('chartEmail').getContext("2d"); |
||
178 | |||
179 | myChart = new Chart(ctx, { |
||
180 | type: 'pie', |
||
181 | data: { |
||
182 | labels: [1, 2, 3], |
||
183 | datasets: [{ |
||
184 | label: "Emails", |
||
185 | pointRadius: 0, |
||
186 | pointHoverRadius: 0, |
||
187 | backgroundColor: [ |
||
188 | '#e3e3e3', |
||
189 | '#4acccd', |
||
190 | '#fcc468', |
||
191 | '#ef8157' |
||
192 | ], |
||
193 | borderWidth: 0, |
||
194 | data: [342, 480, 530, 120] |
||
195 | }] |
||
196 | }, |
||
197 | |||
198 | options: { |
||
199 | |||
200 | legend: { |
||
201 | display: false |
||
202 | }, |
||
203 | |||
204 | pieceLabel: { |
||
205 | render: 'percentage', |
||
206 | fontColor: ['white'], |
||
207 | precision: 2 |
||
208 | }, |
||
209 | |||
210 | tooltips: { |
||
211 | enabled: false |
||
212 | }, |
||
213 | |||
214 | scales: { |
||
215 | yAxes: [{ |
||
216 | |||
217 | ticks: { |
||
218 | display: false |
||
219 | }, |
||
220 | gridLines: { |
||
221 | drawBorder: false, |
||
222 | zeroLineColor: "transparent", |
||
223 | color: 'rgba(255,255,255,0.05)' |
||
224 | } |
||
225 | |||
226 | }], |
||
227 | |||
228 | xAxes: [{ |
||
229 | barPercentage: 1.6, |
||
230 | gridLines: { |
||
231 | drawBorder: false, |
||
232 | color: 'rgba(255,255,255,0.1)', |
||
233 | zeroLineColor: "transparent" |
||
234 | }, |
||
235 | ticks: { |
||
236 | display: false, |
||
237 | } |
||
238 | }] |
||
239 | }, |
||
240 | } |
||
241 | }); |
||
242 | |||
243 | var speedCanvas = document.getElementById("speedChart"); |
||
244 | |||
245 | var dataFirst = { |
||
246 | data: [0, 19, 15, 20, 30, 40, 40, 50, 25, 30, 50, 70], |
||
247 | fill: false, |
||
248 | borderColor: '#fbc658', |
||
249 | backgroundColor: 'transparent', |
||
250 | pointBorderColor: '#fbc658', |
||
251 | pointRadius: 4, |
||
252 | pointHoverRadius: 4, |
||
253 | pointBorderWidth: 8, |
||
254 | }; |
||
255 | |||
256 | var dataSecond = { |
||
257 | data: [0, 5, 10, 12, 20, 27, 30, 34, 42, 45, 55, 63], |
||
258 | fill: false, |
||
259 | borderColor: '#51CACF', |
||
260 | backgroundColor: 'transparent', |
||
261 | pointBorderColor: '#51CACF', |
||
262 | pointRadius: 4, |
||
263 | pointHoverRadius: 4, |
||
264 | pointBorderWidth: 8 |
||
265 | }; |
||
266 | |||
267 | var speedData = { |
||
268 | labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], |
||
269 | datasets: [dataFirst, dataSecond] |
||
270 | }; |
||
271 | |||
272 | var chartOptions = { |
||
273 | legend: { |
||
274 | display: false, |
||
275 | position: 'top' |
||
276 | } |
||
277 | }; |
||
278 | |||
279 | var lineChart = new Chart(speedCanvas, { |
||
280 | type: 'line', |
||
281 | hover: false, |
||
282 | data: speedData, |
||
283 | options: chartOptions |
||
284 | }); |
||
285 | }, |
||
286 | |||
408 | }; |